<template>
  <table id="tableComponent" class="table table-bordered table-striped">
    <thead>
      <tr class="user-select-none">
        <!-- <th @click="toggleSort">
          Id
          <i class="bi bi-sort-alpha-down" aria-label="Sort Icon"></i>
        </th> -->
        <th>
          <div class="dropdown">
            <span
              class="dropdown-toggle"
              id="dropdownMenuTopic"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Имя
            </span>
            <ul class="dropdown-menu p-0" aria-labelledby="dropdownMenuTopic">
              <li class="d-flex">
                <input
                  ref="topic_filter"
                  class="form-control me-1"
                  type="text"
                  v-model="filterParams.name"
                />
              </li>
            </ul>
          </div>
        </th>
        <th>
          <div class="dropdown">
            <span
              class="dropdown-toggle"
              id="dropdownMenuTopic"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Организация
            </span>
            <ul class="dropdown-menu p-0" aria-labelledby="dropdownMenuTopic">
              <li class="d-flex">
                <input
                  ref="topic_filter"
                  class="form-control me-1"
                  type="text"
                  v-model="filterParams.organization"
                />
              </li>
            </ul>
          </div>
        </th>
        <th>
          <div class="dropdown">
            <span
              class="dropdown-toggle"
              id="dropdownMenuTopic"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              ИНН
            </span>
            <ul class="dropdown-menu p-0" aria-labelledby="dropdownMenuTopic">
              <li class="d-flex">
                <input
                  ref="topic_filter"
                  class="form-control me-1"
                  type="text"
                  v-model="filterParams.inn"
                />
              </li>
            </ul>
          </div>
        </th>
        <th>
          <div class="dropdown">
            <span
              class="dropdown-toggle"
              id="dropdownMenuTopic"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Email
            </span>
            <ul class="dropdown-menu p-0" aria-labelledby="dropdownMenuTopic">
              <li class="d-flex">
                <input
                  ref="topic_filter"
                  class="form-control me-1"
                  type="text"
                  v-model="filterParams.email"
                />
              </li>
            </ul>
          </div>
        </th>
        <th>Роль</th>
      </tr>
    </thead>
    <tbody>
      <!-- Loop through the list get the each student data -->
      <tr v-for="item in users" :key="item">
        <!-- <td>{{ item["id"] }}</td> -->
        <td>
          <router-link
            class="text-decoration-none"
            :to="'/user/' + item['id']"
            >{{ item["name"] }}</router-link
          >
        </td>
        <td>{{ item["organization"].name }}</td>
        <td>{{ item["organization"].inn }}</td>
        <td>{{ item["email"] }}</td>
        <td>{{ item["role"] }}</td>
      </tr>
    </tbody>
  </table>
</template>
  <script>
export default {
  name: "TableUser",
  emits: ["filterUpdate"],
  props: {
    //
    users: {
      type: Array,
    },
  },
  data() {
    return {
      filterParams: {},
    };
  },
  methods: {
    toggleSort() {
      this.filterParams.sort = this.filterParams.sort == "asc" ? "desc" : "asc";
    },
  },
  watch: {
    filterParams: {
      handler(newFilter) {
        this.$emit("filterUpdate", newFilter);
      },
      deep: true,
    },
  },
};
</script>